<template>
  <div class="sh-editor-container">
    <VAceEditor
      v-model:value="content"
      :lang="lang"
      :theme="theme"
      :readonly="readonly"
      class="sh-editor"
    />
  </div>
</template>

<script setup name="ShEditor">
import { ref, watch } from 'vue';
import { VAceEditor } from 'vue3-ace-editor';

import 'ace-builds/src-noconflict/mode-sh';
import 'ace-builds/src-noconflict/theme-monokai';

const props = defineProps({
  modelValue: {
    type: String,
    default: ''
  },
  readonly: {
    type: Boolean,
    default: true
  },
  enableSnippets: {
    type: Boolean,
    default: true
  },
  lang: {
    type: String,
    default: 'sh'
  },
  theme: {
    type: String,
    default: 'monokai'
  }
});

const emit = defineEmits(['update:modelValue']);
const content = ref(props.modelValue);

watch(() => props.modelValue, (newVal) => {
  content.value = newVal;
});

watch(content, (newVal) => {
  emit('update:modelValue', newVal);
});
</script>

<style scoped>
.sh-editor-container {
  border: 1px solid #dcdcdc;
  border-radius: 4px;
  overflow: hidden;
}

.sh-editor {
  height: 400px;
  width: 100%;
}

.ace_editor.ace-monokai {
  font-family: 'Fira Code', 'Courier New', Courier, monospace;
  font-size: 14px;
}
</style>
